<template>
<div class="box">
<van-popup position="bottom" v-model="sharePosterShow">
        <!--分享海报-->
        <div class="share-details">
            <div class="share-poster">
                <!-- 自定义模板 -->
                <!-- <div class="share-poster-box">
                    <img src="@/assets/images/poster-custom.png" alt="">
                        <div class="poster-content">
                            <div class="content-left">
                                <div class="photo-box">
                                    <img src="@/assets/temporary/mine-photo.png" alt="">
                                </div>
                                <div>
                                    <h3>远方的风</h3>
                                    <p>邀你一起加入云游趣</p>
                                    <span> 一个有温度的旅行商城</span>
                                </div>
                            </div>
                            <div class="content-right">
                                <div class="code-box">
                                    <img src="@/assets/temporary/code.png" alt="">
                                </div>
                                <p>长按识别</p>
                            </div>
                        </div>
                </div> -->
                <!-- 默认模板 -->
                <div class="share-poster-box">
                    <div class="poster-top">
                        <div class="img-box">
                            <img src="@/assets/images/poster-default.png" alt="">
                        </div>
                        <div class="poster-top-content">
                            <p class="poster-top-title">山西黄小米粥黄小米新米特产5斤2019年5斤2019年</p>
                            <div class="poster-top-price">
                                ￥<b class="new-price">28.5</b><del class="old-price">￥59</del>
                            </div>
                        </div>
                    </div>
                    <div class="poster-content">
                            <div class="content-left">
                                <div class="photo-box">
                                    <img src="@/assets/temporary/mine-photo.png" alt="">
                                </div>
                                <div>
                                    <h3>远方的风</h3>
                                    <p>推荐您享受云游GO内购优惠</p>
                                </div>
                            </div>
                            <div class="content-right">
                                <div class="code-box">
                                    <img src="@/assets/temporary/code.png" alt="">
                                </div>
                                <p>长按识别</p>
                            </div>
                        </div>
                </div>
            </div>
            <div class="clear-box">
                <p>长按图片发送给好友或保存</p>
                <van-icon @click="sharePosterShow=false" name="cross"/>
            </div>
            <div class="bottom-share">
                <p @click="shareToWeChatShow = true">
                    <img src="@/assets/images/icon-WeChat.png">
                    <span>分享转发</span>
                </p>
                <p @click="textCopyShow=true">
                    <img src="@/assets/images/icon-textCopy.png">
                    <span>复制文案</span>
                </p>
            </div>
        </div>
    </van-popup>
    <van-popup position="top" v-model="shareToWeChatShow">
        <!--分享WeChat弹窗-->
        <div>
            <img src="@//assets/images/shareToWeChat.png">
        </div>
    </van-popup>
    <van-popup v-model="shareGraphicShow">
        <!--分享图文-->
        <div class="share-details">

            <div class="share-graphic">
                <div class="graphic-box">
                    <h2>分享图文</h2>
                    <!-- <i><img :src="bannerItems[0].img"></i> -->
                    <div>
                        <p>{{text}} </p>
                        <p>{{href}}</p>
                    </div>
                </div>
                <div class="clear-box">
                    <p>长按图片发送给好友或保存</p>
                    <van-icon @click="shareGraphicShow=false" name="cross"/>
                </div>
            </div>
            <div class="bottom-share">
                <p @click="shareToWeChatShow = true">
                    <img src="@/assets/images/icon-WeChat.png">
                    <span>分享转发</span>
                </p>
                <p @click="textCopyShow=true">
                    <img src="@/assets/images/icon-textCopy.png">
                    <span>复制文案</span>
                </p>
            </div>
        </div>
    </van-popup>
    <van-popup v-model="textCopyShow">
        <!--文案复制-->
        <div class="text-copy">
            <van-icon @click="textCopyShow=false" name="clear"/>
            <h3>分享文案</h3>
            <p>{{text}} </p>
            <p>{{href}}</p>
            <button>复制文案</button>
        </div>
    </van-popup>
</div>
    
</template>

<script>
    export default {
        name: "share",
        data(){
            return{
                sharePosterShow:false,//分享海报弹窗
                shareToWeChatShow: false,//分享WeChat弹窗
                shareGraphicShow: false,//分享图文
                textCopyShow: false,//文案复制
                text: '远方的风-推荐云趣游旅行商城，景点门票、休 闲娱乐、精品线路、文创特产......   ',//文案
                href: 'http://s.tnci.cn/bSkv',//链接
            }
        }
    }
</script>

<style lang="scss" scoped>
 @import "@/assets/css/public";
 @import "@/assets/css/buyBar";


</style>